<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        #chartDom {
            width:800px;
            height: 450px;
            margin:20px auto;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="chartDom"></div>
</body>
<script src="./lib/echarts.min.js"></script>
<script>
    //获取dom
    const chartDom=document.querySelector('#chartDom')
    //初始化eharts图表对象
    const myChart=echarts.init(chartDom)

    //配置echarts图表对象
    const options={
       // color:"#f00",
        //图表标题
        title:{
            text:'echart入门',
            subtext:'积云招生'
        },
        //提示
        tooltip:{},
        //图例
        legend:{
            data:['招生','销售占比','最近招生']
        },
        //x轴
        xAxis:{
            type:'category',
            data:['第一季度','第二季度','第三季度','第四季度'],
        },
        //y轴
        yAxis:{},
        //系列
        series:[
            {   name:'招生',
                type:'bar',
                //改变柱形宽度
                barWidth:65,
                data:[200,300,600,260]
            },
            {   name:'最近招生',
                type:'line',
                data:[210,320,650,300],
            },
            {
                name:'销售占比',
               type:'pie',
               //改变饼图位置，第一个参数距左距离，第二个参数距顶距离
               center:['80%',80],
               //饼图半径,第一个参数内半径，第二个参数外半径
               radius:['0%',60],
               data:[
                   {name:'电子',value:2300},
                   {name:'服装',value:5300},
                   {name:'玩具',value:8300},
            ] 
            }
        ]
    }

    //渲染echarts图表
    myChart.setOption(options)

</script>
</html>